{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">编辑设备</h2>

    <form method="POST" class="needs-validation mb-4" novalidate>
        <!-- 基础信息 -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5>基本信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="name" class="form-label">设备名称</label>
                        <input type="text" class="form-control" id="name" name="name" value="{{ device.name }}"
                            required>
                        <div class="invalid-feedback">
                            请输入设备名称
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="ip" class="form-label">IP地址</label>
                        <input type="text" class="form-control" id="ip" name="ip" value="{{ device.ip }}" required
                            pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}">
                        <div class="invalid-feedback">
                            请输入有效的IP地址
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="device_type" class="form-label">设备类型</label>
                        <select class="form-select" id="device_type" name="device_type" required>
                            <option value="switch" {% if device.device_type=='switch' %}selected{% endif %}>交换机</option>
                            <option value="router" {% if device.device_type=='router' %}selected{% endif %}>路由器</option>
                            <option value="firewall" {% if device.device_type=='firewall' %}selected{% endif %}>防火墙
                            </option>
                            <option value="controller" {% if device.device_type=='controller' %}selected{% endif %}>控制器
                            </option>
                        </select>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="status" class="form-label">当前状态</label>
                        <input type="text"
                            class="form-control bg-{% if device.status == '在线' %}success{% else %}danger{% endif %} text-white"
                            value="{{ device.status }}" readonly>
                    </div>
                </div>
            </div>
        </div>

        <!-- SNMP配置 -->
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5>SNMP配置</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="snmp_community" class="form-label">SNMP团体名</label>
                        <input type="text" class="form-control" id="snmp_community" name="snmp_community"
                            value="{{ device.snmp_community }}" required>
                        <small class="text-muted">用于设备监控和配置的SNMP密码</small>
                    </div>

                    <div class="col-md-6 mb-3 d-flex align-items-end">
                        <button type="button" class="btn btn-outline-primary" onclick="testSNMPConnection()">
                            <i class="bi bi-plug"></i> 测试SNMP连接
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 流表配置 -->
        <div class="card mb-4">
            <div class="card-header bg-warning text-dark">
                <h5>流表规则</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">默认规则</label>
                    <div class="form-text mb-3">
                        自动下发的基础流表规则，将目标地址为本设备的数据包转发给控制器
                    </div>
                </div>

                <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" id="enable_flow" name="enable_flow" checked>
                    <label class="form-check-label" for="enable_flow">启用流表下发</label>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button type="submit" class="btn btn-primary me-md-2">
                <i class="bi bi-save"></i> 保存更改
            </button>
            <a href="{{ url_for('index') }}" class="btn btn-secondary">
                <i class="bi bi-x-circle"></i> 取消
            </a>
        </div>
    </form>

    <div class="card mb-4">
        <div class="card-header bg-danger text-white">
            <h5>设备控制</h5>
        </div>
        <div class="card-body">
            <form id="controlForm" method="POST" action="{{ url_for('device_control', device_id=device.id) }}"
                class="needs-validation" novalidate>
                <div class="mb-3">
                    <label for="command" class="form-label">控制命令</label>
                    <textarea class="form-control" id="command" name="command" rows="3" placeholder="输入要执行的命令..."
                        required></textarea>
                    <div class="invalid-feedback">
                        请输入命令
                    </div>
                    <div class="form-text">
                        输入要发送到设备的命令字符串，将直接传递到后端处理
                    </div>
                </div>

                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <button type="button" class="btn btn-outline-secondary me-md-2"
                        onclick="document.getElementById('controlForm').reset()">
                        <i class="bi bi-arrow-counterclockwise"></i> 重置
                    </button>
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-send"></i> 执行命令
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- SNMP测试脚本 -->
<script>
    function testSNMPConnection() {
        const ip = document.getElementById('ip').value;
        const community = document.getElementById('snmp_community').value;

        if (!ip || !community) {
            alert('请先填写IP和SNMP团体名');
            return;
        }

        fetch('/test_snmp', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                ip: ip,
                community: community
            })
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(`SNMP连接成功！\n设备名称: ${data.device_name}\nCPU负载: ${data.cpu_usage}%`);
                } else {
                    alert('SNMP连接失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('测试请求失败');
            });
    }
</script>

<!-- 表单验证 -->
<script>
    (function () {
        'use strict'
        const forms = document.querySelectorAll('.needs-validation')
        Array.from(forms).forEach(form => {
            form.addEventListener('submit', event => {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        })
    })()
</script>

<script>
        // 添加表单验证
        (function () {
            'use strict'
            const forms = document.querySelectorAll('#controlForm')
            Array.from(forms).forEach(form => {
                form.addEventListener('submit', event => {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
        })()
</script>

<style>
    .bg-success {
        background-color: #28a745 !important;
    }

    .bg-danger {
        background-color: #dc3545 !important;
    }
</style>
{% endblock %}